<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link href="css/swiper-5.4.5/swiper.min.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.css" rel="stylesheet">
    <link href="css/index.css" rel="stylesheet">
    <link href="css/my.css" rel="stylesheet">
    <link href="css/nav.css" rel="stylesheet">
    <link href="css/notice.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
    <!-- 头部-->
    <div style="width: 100%; height: 60px;line-height: 60px;background-color: #333333">
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    <div style="color: #b3d8ff;font-size: 20px;">电动甄选</div>
                </div>
                <div class="col-md-4" style="text-align: right;color: #EEEEEE;"v-if="user.name">
                    <span style="color: #b3d8ff;margin-right: 20px;">{{user.name}}</span>
                    <a style="color: #EEEEEE" href="javascript:void (0)"@click="logout">退出</a>

                </div>
                <div v-else class="col-md-4"style="text-align: right;">
                    <a style="color: #EEEEEE;margin-right: 10px;" href="/end/page/login.html" target="_blank">登录</a>
                    <a style="color: #EEEEEE" href="/end/page/register.html" target="_blank">注册</a>

                </div>
            </div>
        </div>
    </div>

    <!--导航-->
    <div class="container" style="margin: 5px auto;background-color: #FFFFFF;">
        <div style="width: 100%;height: 50px;line-height: 50px">
            <div class="col-md-12">
                <div class="row">
                    <ul style="display: flex;">
                        <li class="nav-item active"><a href="index.html">首页</a> </li>
                        <li class="nav-item"><a href="noticeInfo.html">公告</a> </li>
                        <li class="nav-item"><a href="videoInfo.html">新能源介绍</a> </li>
                        <li class="nav-item"><a href="richTextInfo.html">汽车详细信息</a> </li>
                        <li class="nav-item"><a href="messageInfo.html">论坛</a> </li>
                        <li class="nav-item"><a href="cartInfo.html">购物车</a> </li>
                        <li class="nav-item"><a href="orderInfo.html">订单</a> </li>
                        <li class="nav-item"><a href="commentInfo.html">评价</a> </li>
                        <li class="nav-item"><a href="javascript:void(0);"@click="personalPage">个人信息</a> </li>
                        <li class="nav-item" v-if="isShow"><a href="/end/page/index.html" target="_blank">进入后台系统</a> </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!--主题开始-->
    <div style="width: 100%">
        <div class="container">
            <!--跑马灯-->
            <div class="swiper-container" style="width: 100%;height: 50%">
                <div class="swiper-wrapper">
                    <div class="swiper-slide"><img class="carousel-img" style="font-size: 100%" src="/front/img/carousel/滚动1.jpg"></div>
                    <div class="swiper-slide"><img class="carousel-img"  style="font-size: 100%" src="/front/img/carousel/滚动2.jpg"></div>
                    <div class="swiper-slide"><img class="carousel-img" src="/front/img/carousel/滚动3.jpg"></div>
                    <div class="swiper-slide"><img class="carousel-img" src="/front/img/carousel/滚动4.jpg"></div>
                    <div class="swiper-slide"><img class="carousel-img" src="/front/img/carousel/绿跑.jpg"></div>
                </div>
                <div class="swiper-pagination"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
            </div>


            <!--分类商品-->
            <div class="row" style="margin-top: 20px;">
                <div class="col-md-2">
                    <div style="color: #428bca; font-size: 24px ;padding: 10px;"><b>热门分类</b></div>
                </div>
                <div class="col-md-10" style="padding: 18px;">
                    <span style="margin: 0 20px;text-align: center; cursor: pointer;" v-for="(item,index) in typeObjs"
                          :class="{'active':activeIndex === index}" @click="getIndexAndGoods(item.id,index)">{{item.name}}</span>
                </div>
                <div class="col-md-12">
                    <div style="border-bottom: 3px solid #b3d8ff"></div>
                </div>
            </div>
            <div class="row" style="padding: 10px 0;margin-bottom: 20px;">
                <div class="col-md-12">
                    <ul class="goods-box">
                        <li v-for="item in goodsList" style="width: 30%;padding: 10px;display: inline-block">
                            <a :href="'/front/goodsInfo.html?goodsId='+item.id" target="_blank">
                                <img :src="item.src" style="width: 100%;height: 200px;">
                                <p style="text-align: center;color: #666666;font-size: 20px;">{{item.name}}</p>
                                <p style="text-align: center;color: red;font-size: 15px;">{{item.price}}￥</p>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>



            <div class="row" style="padding: 10px 0;margin-bottom: 20px;">
                <div class="col-md-12">
                    <div style="color: #b3d8ff;font-size: 24px;padding: 10px;border-bottom: 3px solid #b3d8ff;"><b>推荐</b></div>
                    <ul class="goods-box">
                        <li v-for="item in recommends" style="width: 30%;padding: 10px;display: inline-block">
                            <a :href="'/front/goodsInfo.html?goodsId='+item.id" target="_blank">
                                <img :src="item.src" style="width: 100%;height: 200px;">
                                <p style="text-align: center;color: #666666;font-size: 20px;">{{item.name}}</p>
                                <p style="text-align: center;color: red;font-size: 15px;">{{item.price}}￥</p>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>




        </div>
    </div>
</div>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/swiper-5.4.5/swiper.min.js"></script>
<script src="js/vue2.6.11/axios.js"></script>
<script src="js/vue2.6.11/vue.min.js"></script>
<script src="js/my.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.metisMenu.js"></script>
<script>
    $(function (){
       var mySwiper = new Swiper('.swiper-container',{
          autoPlay:{
              delay: 1000,
              disableOnInteraction: false
          } ,
           loop: true,    //循环模式开启
           speed: 2000,   //

           //分页器
           pagination:{
               el:".swiper-pagination",
               clickable: true
           },
           //需要前进后退按钮
           navigation:{
              nextEl:'.swiper-button-next',
               prevEl:'.swiper-button-prev'
           }
       });
        mySwiper.autoplay.start();
       //鼠标移入停止自动滚动
       var $swiperSide = $('.swiper-slide');
        $swiperSide.mouseenter(function (){
            mySwiper.autoplay.stop();
        });
        $swiperSide.mouseleave(function (){
            mySwiper.autoplay.start();
        })

    });


    new Vue({
        el:'#wrapper',
        data:{
            user: {},
            isShow: false, //是否显示进入后台管理
            typeObjs: [],  //所有商品类型--分类
            goodsList: [], //热门商品
            activeIndex: 0,  //商品分类高亮的序号
            recommends: [],  //推荐商品列表
        },
        created: function (){
            axios.get("/auth").then(res =>{
               if(res.data.code==='0'){
                   this.user = res.data.data;
                   if (this.user.level !== 3){
                       this.isShow = true;
                   }
               }
            });
            //查询所有商品类型
            axios.get("/typeInfo").then(res => {
                this.typeObjs = res.data.data;
                this.getIndexAndGoods(this.typeObjs[0].id,0);
            });
            this.loadRecommends(1);


        },

        methods:{
            logout(){
                axios.get("/logout").then(res =>{
                    if(res.data.code==='0'){
                        location.href ='/front/index.html'
                    }
                });
            },
            //获取商品分类对应的热门商品
            getIndexAndGoods(typeId,index){
                this.activeIndex = index;
                axios.get('/goodsInfo/findByType/'+typeId).then(res =>{
                    if(res.data.code==='0'){
                        this.goodsList = res.data.data;
                        if (this.goodsList.lenth>5){
                            this.goodsList = this.goodsList.slice(0,5);
                        }
                        this.goodsList.forEach(item =>{
                            let imgSrc = '/front/img/goods/默认图片.jpg';
                            if(item.fileIds){
                                let fileId = JSON.parse(item.fileIds)[0];
                                imgSrc = '/files/download/'+fileId;
                            }
                            item.src = imgSrc;
                        });

                    }
                });
            },

            //获取推荐商品列表
            loadRecommends(pageNum){
                axios.get('/goodsInfo/recommend?pageNum='+pageNum).then(res =>{
                    if(res.data.code==='0'){
                        this.recommends = res.data.data.list;
                        this.recommends.forEach(item =>{
                            let imgSrc = '/front/img/goods/默认图片.jpg';
                            if(item.fileIds){
                                let fileId = JSON.parse(item.fileIds)[0];
                                imgSrc = '/files/download/'+fileId;
                            }
                            item.src = imgSrc;
                        });

                    }
                });
            }


        }
    });
</script>
</body>
</html>